<template>
    <div>
      <el-card class="box-card">
        <mytitle :showLine="false">{{$route.meta.title}}</mytitle>
        <el-button type="success"  style="margin: 20px;" @click="addDev">新增设备</el-button>
        <el-table ref="singleTable" v-loading="loading" :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" :data="tableData" highlight-current-row @current-change="handleCurrentChange" border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="name" label="设备名称"  align="center">
          </el-table-column>
          <el-table-column prop="type" label="设备类型"  align="center">
          </el-table-column>
          <el-table-column prop="manufacturer" label="设备厂商"  align="center">
          </el-table-column>
          <el-table-column prop="serial" label="设备序列号" align="center">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="editRow(scope.row)" type="text" >编辑</el-button>
              <el-popconfirm
                  title="确定删除?"
                  @confirm="deleteRow(scope.row)"
                >
                <el-button slot="reference" type="text"    style="margin: 0 20px;color: red;">删除</el-button>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
         <div class="pagination-box">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page.sync="info.pageNum"
            :page-size="info.pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
         </div>
      </el-card>
    </div>
  </template>
  <script>
  import { findAllEquipmentDetails,delEquipmentById } from "../util/api.js"
  export default {
    data() {
      return {
        info: {
        pageNum: 1,
        pageSize: 10,
        },
        total:0,
        loading:false,
        tableData: [],
        currentRow: null
      }
    },
    mounted(){
         this.findAll()
    },
    methods: {
      async findAll(){
         this.loading = true
         let res = await findAllEquipmentDetails(this.info)
         if(res.code!=200)return
         this.tableData = res.data.rows
         this.total = res.data.total
         this.loading = false
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      pageChange(val) {
          this.info.pageNum = val
          this.findAll()
      },
      editRow(row){ 
             this.$router.push({
                 path:"/equimentManagement/compile",
                 query:{data:encodeURIComponent(JSON.stringify(row))}
             })  
      },
      addDev(){
        this.$router.push({
            path:"/equimentManagement/add"
        })
      },
      async deleteRow(row) {
        let res = await delEquipmentById({equipmentId:row.id})
        if(res.code!=200)return
        this.$message.success('删除成功！')
        this.findAll()
        }
    }
  }
  </script>
  <style lang="less" scoped>
  .box-card {
    width: 100%;
    margin: 14px 0;
    .pagination-box{
      width: 100%;
      padding: 20px;
      .el-pagination{
        text-align: right;
      }
    }
  }
  </style>